<template>
  <div class="wrapContainer">
    <div class="flex">
      <div class="flex items-center text-[#4d0ad4]">
        <span class="bg-[#4d0ad4] w-[10px] h-[10px] rounded-full mr-[10px]"></span>
        <span>未结算</span>
      </div>

      <div class="flex items-center text-[#6dd400] ml-[20px]">
        <span class="bg-[#6dd400] w-[10px] h-[10px] rounded-full mr-[10px]"></span>
        <span>已结算</span>
      </div>
    </div>
    <div id="wrapContainer" ref="wrapContainer" class="list" @mousedown="startDrag" @mousemove="handleDrag" @mouseup="stopDrag">
      <!-- 防止滑动点击 -->
      <div id="prevWrap" class="list">
        <div
          v-for="item in prevDays"
          :key="item.dateDay"
          :class="list.includes(item.dateDay) ? 'con active' : 'con'"
          @click.stop="checkAction(item.year + '-' + item.month + '-' + item.day, $event)"
          :id="item.year + '-' + item.month + '-' + item.day"
        >
          <div class="top">
            <div class="date">{{ item.month }}.{{ item.day }}</div>
          </div>
          <div class="middel" :style="getMiddelBack(item.settledNum, item.num)"></div>
          <div class="bottom">
            <!-- 判断是否有值 -->
            <template v-if="item.num != 0 || item.settledNum != 0">
              <!-- 判断样式 -->
              <div :class="item.settledNum || item.num ? 'right have_num' : 'right not_num'">
                {{ item.num }}
              </div>
              <div :class="item.settledNum || item.num ? 'left have_num' : 'left not_num'">
                {{ item.settledNum }}
              </div>
            </template>
          </div>
        </div>
        <div
          v-for="item in days"
          :key="item.dateDay"
          :class="list.includes(item.dateDay) ? 'con active' : 'con'"
          @click.stop="checkAction(item.year + '-' + item.month + '-' + item.day, $event)"
          :id="item.year + '-' + item.month + '-' + item.day"
        >
          <div class="top">
            <div class="date">{{ item.month }}.{{ item.day }}</div>
          </div>
          <div class="middel" :style="getMiddelBack(item.settledNum, item.num)"></div>
          <div class="bottom">
            <template v-if="item.num != 0 || item.settledNum != 0">
              <div :class="item.settledNum || item.num ? 'right have_num' : 'right not_num'">
                {{ item.num }}
              </div>
              <div :class="item.settledNum || item.num ? 'left have_num' : 'left not_num'">
                {{ item.settledNum }}
              </div>
            </template>
          </div>
        </div>
        <div
          v-for="item in nextDays"
          :key="item.dateDay"
          :class="list.includes(item.dateDay) ? 'con active' : 'con'"
          @click.stop="checkAction(item.year + '-' + item.month + '-' + item.day, $event)"
          :id="item.year + '-' + item.month + '-' + item.day"
        >
          <div class="top">
            <div class="date">{{ item.month }}.{{ item.day }}</div>
          </div>
          <div class="middel" :style="getMiddelBack(item.settledNum, item.num)"></div>
          <div class="bottom">
            <template v-if="item.num != 0 || item.settledNum != 0">
              <div :class="item.settledNum || item.num ? 'right have_num' : 'right not_num'">
                {{ item.num }}
              </div>
              <div :class="item.settledNum || item.num ? 'left have_num' : 'left not_num'">
                {{ item.settledNum }}
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dragMoveX from '@/utils/dragMoveX.js';

export default {
  props: {
    prevDays: {
      type: Array,
      default: () => []
    },
    days: {
      type: Array,
      default: () => []
    },
    nextDays: {
      type: Array,
      default: () => []
    },
    isScollLeft: {
      type: Boolean,
      default: false
    },
    checkList: {
      type: Array,
      default: () => []
    },
    timeId: {
      type: String,
      default: ''
    }
  },
  model: {
    prop: 'checkList',
    event: 'chrenBack'
  },
  data() {
    return {
      list: [],
      dragging: false,
      num: 0, // 鼠标悬停时间
      time: 20, // 鼠标悬停阈值
      isBrowseMonth: true
    };
  },
  mounted() {
    this.horizontalScrolling();
  },
  watch: {
    timeId(val) {
      this.$nextTick(() => {
        // 获取初始化的id
        let idStr = `${val.split('-')[0]}-${val.split('-')[1]}-01`;
        // 判断是否初始化滚动
        // 如果是初始化则滚动到一号
        // 如果不是则将计算将值放在中部
        let onDate = this.isBrowseMonth ? document.getElementById(idStr) : document.getElementById(val);
        let leftNum = this.isBrowseMonth ? onDate.offsetLeft : onDate.offsetLeft - onDate.offsetWidth * 15;
        document.getElementById('wrapContainer').scrollTo({ left: leftNum, behavior: 'smooth' });
        dragMoveX(document.getElementById('wrapContainer'));
        this.isBrowseMonth = false;
      });
    },
    list: {
      handler: function () {
        this.$emit('chrenBack', this.list);
      }
    },
    checkList: {
      handler: function (val) {
        this.list = val;
        if (this.isBrowseMonth) {
          let idStr = `${this.timeId.split('-')[0]}-${this.timeId.split('-')[1]}-01`;
          let onDate = document.getElementById(idStr);
          let leftNum = onDate.offsetLeft;
          document.getElementById('wrapContainer').scrollTo({ left: leftNum, behavior: 'smooth' });
          this.isBrowseMonth = false;
        }
      }
    }
  },
  methods: {
    // 滚轮鼠标横向滚动
    horizontalScrolling() {
      //判断浏览器
      let isIE = navigator.userAgent.match(/MSIE (\d)/i);
      isIE = isIE ? isIE[1] : undefined;
      let isFF = /FireFox/i.test(navigator.userAgent);
      let container = document.getElementById('wrapContainer');

    },
    // 选中事件
    check() {
      this.$emit('chrenBack', this.list);
    },
    // 点击con选中
    checkAction(item) {
      if (!this.dragging) {
        if (this.list.filter((tmp) => tmp === item).length === 0) {
          this.list.push(item);
        } else {
          this.list = this.list.filter((tmp) => tmp !== item);
        }
        this.$emit('chrenBack', this.list);
      }
    },
    chrenBack(val) {
      this.list = val;
    },
    // 设置css样式
    getMiddelBack(settledNum, unsettledNum) {
      let str = '';
      // 如果未结算=0 则显示灰色
      if (unsettledNum == 0) return 'background: #d8d3d3;';
      // 判断渐变占比
      // let settled = parseInt(settledNum);
      // let unsettled = parseInt(unsettledNum);
      // let total = settled + unsettled;
      // if (settled >= unsettled) {
      //   str = `background-image: linear-gradient(to right,#fedc45 0 ${
      //     (settled / total) * 100 - `${unsettled ? 10 : 0}`
      //   }%,#fb7099 ${(settled / total) * 100 + 10}% 100%);`;
      // } else {
      //   str = `background-image: linear-gradient(to left,#fb7099 0 ${
      //     (unsettled / total) * 100 - 10
      //   }%,#fedc45 ${
      //     (unsettled / total) * 100 + `${settled ? 10 : 0}`
      //   }% 100%);`;
      // }
    },
    startDrag() {
      this.dragging = true;
    },
    handleDrag() {
      if (this.dragging) {
        this.num++;
      }
    },
    stopDrag() {
      // 判断鼠标悬停时长
      if (this.num < this.time) {
        this.num = 0;
        this.dragging = false;
        return;
      }
      this.num = 0;
      this.dragging = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.list {
  flex-shrink: 0;
  align-items: center;
  display: flex;
  column-gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  height: 125px;
  position: relative;
  user-select: none;
  cursor: pointer;

  .con {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    width: 47px;
    height: 95px;
    flex-shrink: 0;
    padding: 10px 4px;
    border-radius: 5px;
    position: relative;
    &::after {
      position: absolute;
      content: '';
      right: -2px;
      top: 0;
      height: 100%;
      width: 1px;
      background-color: #f3f3f3;
    }
    .top {
      display: flex;
      justify-content: space-between;
      flex-flow: column-reverse;
      text-align: center;

      .date {
        font-size: 15px;
        color: #46535a;
      }
    }

    .middel {
      width: 100%;
      height: 1px;
      flex-shrink: 0;
      background-color: #93adf9;
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      flex-flow: column;
      text-align: center;
      height: 30px;
      flex-shrink: 0;

      .right.have_num {
        color: #4d0ad4;
        position: relative;
      }

      .right.not_num {
        color: #4d0ad4;
      }

      .left.have_num {
        color: #6dd400;
        position: relative;
      }

      .left.not_num {
        color: #6dd400;
      }
    }
  }
}
.con:nth-last-of-type(1) {
  &::after {
    display: none;
  }
}

input[type='checkbox'] {
  width: 10px;
  height: 10px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 18px;
  position: relative;
  top: 3px;
  right: 4px;
}

input[type='checkbox']::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  background: #d6d6d6;
  width: 18px;
  height: 18px;
  border: 0px;
  border-radius: 5px;
  display: block;
}

input[type='checkbox']:checked::before {
  display: block;
  content: '';
  background-color: #ffb923;
  position: absolute;
  top: -50%;
  left: -50%;
  width: 18px;
  height: 18px;
  border: 0px;
  font-size: 10px;
  font-weight: bold;
  border-radius: 5px;
}
.con.active {
  border: 1px solid #86c5ff;
}
.con::-webkit-scrollbar {
  display: none;
}

#wrapContainer{
  overflow-x: auto;
}
</style>
